<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IP白名单列表</title>
    <link rel="stylesheet" type="text/css" href="/static/hplus/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/hplus/css/plugins/dataTables/dataTables.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="/static/hplus/css/plugins/datapicker/datepicker3.css">
    <link rel="stylesheet" type="text/css" href="/static/hplus/css/style.css">
    <link rel="stylesheet" type="text/css" href="/static/layer/skin/layer.css">
    <link rel="stylesheet" type="text/css" href="/static/paging/paging.css">
    <style type="text/css">
        .form-control {width: 150px;}
        .input-sm {width: 200px;display: inline-block;}
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <form action="/admin/ips" method="post">
                        <table style="width: 100%;padding: 0;border: none">
                            <tr>
                                <td>
                                    <input type="text" name="keyword" placeholder="关键字搜索" class="input-sm form-control" value="{$keyword}">
                                </td>
                                <td class="ttb"><input type="submit" class="btn btn-sm btn-primary" value="筛选"></td>
                                <td class="ttb"><input type="button" class="btn btn-sm btn-primary" value="添加" id="add">
                                </td>
                                <td>
                                    <a href="javascript:;" data-action="delAll">批量删除</a>
                                </td>
                                <td>&nbsp;</td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div class="ibox-content">
                    <table class="table table-striped table-bordered table-hover dataTables-example">
                        <thead>
                        <tr>
                            <th><input type="checkbox" id="selAll"></th>
                            <th>序号</th>
                            <th>ip地址</th>
                            <!-- <th>状态</th> -->
                            <th>登录账号</th>
                            <th>登录时间</th>
                            <th>添加时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {foreach $list as $k=>$item}
                        <tr class="gradeX">
                            <td><input type="checkbox" class="check" value="{$item.id}"></td>
                            <td>{$k+1}</td>
                            <td>{$item.ip}</td>
                            <!-- <td>$item.status_txt</td> -->
                            <td>{$item.username}</td>
                            <td>{$item.login_time}</td>
                            <td>{$item.ctime}</td>
                            <td><a href="javascript:;" data-action="del" data-id="{$item.id}">删除</a></td>
                        </tr>
                        {/foreach}
                        </tbody>
                        <footer>
                            <tr>
                                <td colspan="100">
                                    <div class="dataTables_paginate paging_simple_numbers paging_page">{$pages}</div>
                                </td>
                            </tr>
                        </footer>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="/static/hplus/js/jquery.min.js?v={php}echo time(){/php}"></script>
<script type="text/javascript" src="/static/layer/layer.js?v={php}echo time(){/php}"></script>
<script type="text/javascript" src="/static/paging/paging-min.js?v={php}echo time(){/php}"></script>
<script>
    $(function () {
        $('.gradeX').each(function () {
            $(this).children('td:eq(0)').siblings().click(function () {
                let chk = $(this).parent('tr').find('.check');
                chk.click()
            })
        });
        $('#selAll').click(function () {
            if ($(this).is(':checked')) {
                $('.check').prop('checked', true);
            } else {
                $('.check').prop('checked', false);
            }
        });
        $('#add').click(function () {
            location.href = '/admin/addip'
        })
        $('a[data-action]').click(function () {
            let $action = $(this).data('action'), $id = $(this).data('id');
            let $ids = '0'
            if ($action === 'disable' || $action === 'enable' || $action === 'del') {
                $ids = '0,' + $id;
            } else if ($action === 'disableAll' || $action === 'enableAll' || $action === 'delAll') {
                $('.check').each(function () {
                    if ($(this).is(':checked')) {
                        $ids += (',' + $(this).val())
                    }
                });
            }
            operate($ids, $action)
        });

        function operate($ids, $type) {
            let $msg = '', $tip = '';
            if ($type === 'del' || $type === 'delAll') {
                $msg = '确实要删除吗？';
                $tip = '删除';
            }
            if ($ids === '0') {
                layer.msg('请选择要' + $tip + '的项');
                return false
            }
            layer.confirm($msg, {icon: 3}, function () {
                $.ajax({
                    type: 'post', cache: false, dataType: 'json',
                    url: '/admin/operate_ip',
                    data: {'ids': $ids, 'type': $type},
                    success: function (data) {
                        if (data.code === 200) {
                            layer.msg(data.message, {icon: 1, time: 1000}, function () {
                                location.reload();
                            });
                        } else {
                            layer.msg(data.message, {icon: 5})
                        }
                    }
                })
            })
        }
    });
</script>
</html>
